<template>
	<view><button v-if="userType === 1" @click="shopAdd">新增商品</button></view>
	<!-- 页面内容 -->
	<view class="container">
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
				<image class="goods-img" :src="item.shop_url"></image>
				<view class="goods-name">{{ item.shop_name }}</view>
				<view class="goods-price">{{ item.shop_score }}积分</view>
				<view v-if="userType === 2 ">
					<button class="exchange-btn" v-if="item.status === 1 " @tap="shopExchange(item)">兑换</button>
					<button class="exchange-btn" v-else disabled>已兑换</button>
				</view>

				<view v-else>
					<button class="exchange-btn" @tap="shopUpdate(item)">编辑</button>
					<button class="exchange-btn" @tap="shopDel(item)">删除</button>
				</view>

			</view>

		</view>
		<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="onLoadList()" />
	</view>

</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import {
		publicShopList,
		patriarchShopDel,
		babyExchangeAdd
	} from '@/api/api.js'
	export default {
		data() {
			return {
				listReq: {
					pageInfo: {
						page: 1,
						size: 5,
					}
				},
				status: 'more',
				contentText: {
					contentdown: '点击查看更多',
				},
				userType: store.state.userType,
				goodsList: []
			};
		},
		onLoad() {
			this.loadList()
		},
		onTabItemTap() {
			if (this.goodsList.length > 0) {
				uni.reLaunch({
					url: '/pages/shop/shop'
				});
			}

		},
		methods: {
			loadList() {
				publicShopList(this.listReq).then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						var data = res.data.data
						let list = this.goodsList
						this.goodsList = list.concat(data.list)
						if (data.page_info.total_page - this.listReq.pageInfo.page <= 0) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}
					}
				})
			},
			shopExchange(item) {
				// 点击兑换按钮触发的事件
				uni.showModal({
					title: "温馨提示",
					content: "确认兑换？",
					success(res) {
						if (res.confirm) {
							babyExchangeAdd(item.shop_uuid).then(res => {
								console.log(res.data)
								if (res.data.code != 0) {
									uni.showToast({
										icon: "none",
										title: res.data.message
									})
								} else {
									uni.reLaunch({
										url: '/pages/shop/shop'
									});
								}
							})
						}
					},

				})

			},
			shopDel(item) {
				uni.showModal({
					title: "温馨提示",
					content: "确认删除？",
					success: function(res) {
						if (res.confirm) {
							patriarchShopDel(item.shop_uuid).then(res => {
								console.log(res.data)
								if (res.data.code != 0) {
									uni.showToast({
										icon: "none",
										title: res.data.message
									})
								} else {
									uni.reLaunch({
										url: '/pages/shop/shop'
									})
								}
							})
						}
					}
				})
			},
			shopUpdate(item) {
				uni.navigateTo({
					url: '/pages/shop/update/update?shop_uuid=' + item.shop_uuid
				});
			},
			shopAdd(item) {
				uni.navigateTo({
					url: '/pages/shop/add/add'
				});
			},
			onLoadList() {
				this.status = 'loading'
				this.listReq.pageInfo.page += 1
				this.loadList()
			},
		}
	};
</script>
<style>
	.container {
		padding: 20px;
	}

	.swiper {
		height: 200px;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.goods-list {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods-item {
		width: 48%;
		margin-bottom: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
	}

	.goods-img {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
		background-color: #f5f5f5;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;

	}

	.goods-name {
		padding: 10px;
		font-size: 16px;
		color: #333;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods-price {
		padding: 10px;
		font-size: 14px;
		color: #999;
		text-align: center;
	}

	.exchange-btn {
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
		padding: 10px 20px;
		background-color: #f85959;
		border-radius: 20px;
		color: #fff;
		font-size: 16px;
		text-align: center;
		line-height: 1;
	}
</style>